<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
    />
    <r-table
      :isSelection="false"
      :isHandle="true"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      @refresh="page()"
    />
    <r-form
      labelWidth="100px"
      :isHandle="true"
      :formRules="formRules"
      :formCols="formCols"
      :formHandle="formHandle"
      :formData="formData"
      ref="elForm"
      :inline="false"
      dialogWidth="550px"
    />

    <changePwd
      :res="changePwdData"
      v-if="changePwdData.show"
      v-on:changePwdCall="changePwdCall"
    ></changePwd>
  </div>
</template>

<script>
import changePwd from "./cus/changePwd";
export default {
  components: {
    changePwd
  },
  data() {
    var password2 = (rule, value, callback) => {
      if (value != this.formData.password) {
        return callback(new Error("两次密码不一样"));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("PhoneCannot Empty"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("Please Input正确的Phone"));
        }
      }
    };
    return {
      changePwdData: {
        show: false
      },
      tableLoading: false,
      searchData: {
        userName: "",
        phonenumber: "",
        roleName: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "登录账号",
          prop: "userName",
          width: 200
        },
        {
          type: "input",
          placeholder: "Phone",
          prop: "phonenumber",
          width: 200
        },
        {
          type: "select",
          placeholder: "所属角色",
          prop: "roleName",
          width: 200,
          options: []
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "primary",
          plain: true,
          handle: e => this.getData()
        }
      ],
      tableHandles: [
        {
          label: "Add管理员",
          type: "primary",
          plain: true,
          handle: e => {
            this.elFormVisible();
          }
        }
      ],
      tableData: [{}],
      tableCols: [
        { label: "ID", prop: "userId" },
        { label: "登录账号", prop: "userName" },
        { label: "姓名", prop: "nickName" },
        { label: "Phone", prop: "phonenumber" },
        { label: "所属角色", prop: "roleName" },
        { label: "Creation Time", prop: "createTime" },
        {
          label: "是否Enable",
          prop: "status",
          theme: e => (e.status == 0 ? "primary" : "danger"),
          type: "tag",
          formatter: e => (e.status == 0 ? "Enable" : "Forbidden")
        },
        {
          label: "Operations",
          type: "button",
          width: 260,
          btnList: [
            {
              label: "Edit",
              type: "success",
              size: "mini",
              plain: true,
              icon: "el-icon-search",
              handle: row => this.elFormDetail(row)
            },
            {
              label: "Delete",
              type: "danger",
              size: "mini",
              plain: true,
              icon: "el-icon-delete",
              handle: row => this.del(row)
            }
            // {
            //   label: "Reset密码",
            //   type: "success",
            //   size: "mini",
            //   icon: "el-icon-search",
            //   handle: (row) => {
            //     this.changePwdData = {
            //       show: true,
            //       id: row.id
            //     }
            //   }
            // },
          ]
        }
      ],
      pagination: { limit: 10, offset: 2, total: 1 },
      formData: {
        username: "",
        password: "",
        roleId: "",
        name: "",
        phone: ""
      },
      formCols: [
        { type: "input", label: "管理员Name", width: 350, prop: "name" },
        { type: "input", label: "登录账号", width: 350, prop: "username" },
        { type: "input", label: "Phone码", width: 350, prop: "phone" },
        {
          type: "select",
          label: "选择角色",
          width: 350,
          prop: "roleId",
          options: []
        },
        {
          type: "input",
          label: "密码",
          width: 350,
          prop: "password",
          isShow: e => this.isShow_(e)
        }
      ],
      formRules: {
        username: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        phone: [{ required: false, message: "Please Enter", trigger: "blur" }],
        name: [{ required: false, message: "Please Enter", trigger: "blur" }],
        password: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        roleId: [{ required: true, message: "Please Select", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "确认",
          type: "primary",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormSubmit()
        },
        {
          label: "Cancel",
          icon: "el-icon-circle-close",
          handle: e => this.elFormVisible()
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.getData();
    this.getRoleList();
  },
  methods: {
    isShow_() {
      if (this.formData.id) {
        this.formRules.password[0].required = false;
        return true;
      } else {
        this.formRules.password[0].required = true;
        return true;
      }
    },
    changePwdCall() {
      this.changePwdData.show = false;
    },
    del(row) {
      this.$confirm("确定要Delete吗?", "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      })
        .then(async () => {
          var res = await this.apis.user_delete({
            userId: row.userId
          });
          this.$message({
            type: "success",
            message: "DeleteSuccess!"
          });
          this.getData();
        })
        .catch(() => {});
    },
    async getRoleList() {
      var res = await this.apis.getRoleList({});
      var list = res.rows || [];
      let list2 = [];
      list.map(res => {
        res.value = res.roleId;
        res.label = res.roleName;
        let obj = {
          value: res.roleName,
          label: res.roleName
        };
        list2.push(obj);
      });

      this.formCols[this.labIndex(this.formCols, "选择角色")].options = list;
      this.searchForm[
        this.labIndex2(this.searchForm, "roleName")
      ].options = list2;
    },
    async getData() {
      var res = await this.apis.user_list({
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit,
        userName: this.searchData.userName,
        phonenumber: this.searchData.phonenumber,
        roleName: this.searchData.roleName
      });
      var list = res.rows || [];
      this.tableData = list;
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    },
    createdAcc() {
      this.elFormVisible();
    },
    async elFormDetail(row) {
      this.formData.id = row.userId;
      this.formData.name = row.nickName;
      this.formData.phone = row.phonenumber;
      this.formData.username = row.userName;
      this.formData.roleId = row.roleId;

      this.elFormVisible();
    },
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit();
        }
      });
    },
    async submit() {
      if (!this.formData.id) {
        var res = await this.apis.user_save({
          userName: this.formData.username,
          nickName: this.formData.name,
          phonenumber: this.formData.phone,
          password: this.formData.password,
          roleIds: [this.formData.roleId]
        });
      } else {
        var res = await this.apis.user_update({
          userName: this.formData.username,
          nickName: this.formData.name,
          phonenumber: this.formData.phone,
          password: this.formData.password,
          roleIds: [this.formData.roleId],
          userId: this.formData.id
        });
      }
      this.elFormVisible();

      this.getData();
    }
  }
};
</script>

<style scoped lang="scss"></style>
